<template>
    <div class="process-node-render" ref="tip">
        <div :class="{'process-node-error': error}">
        <div style="font-size: 16px">
            <span v-if="task.enableEdit" style="color: red"> * </span>
            {{ task.title }}
        </div>
        <span style="color:#a8adaf;" v-if="task.users">{{ desc }}</span>
        </div>
        <div style="display:flex;">
        <avatar :closeable="user.enableEdit" @close="delUser(i)" :size="38" showY :src="user.avatar"
                :type="user.type" :name="user.name" v-for="(user, i) in task.users" :key="'user_'+i"></avatar>
        <span class="add-user" v-if="task.enableEdit && (task.multiple || task.users.length === 0)" @click="$emit('addUser', task)">
            <!-- <icon name="el-icon-plus"></icon> -->
            <el-icon><Plus /></el-icon>
            <div>添加</div>
        </span>
        </div>
    </div>
</template>

<script>
import { Plus } from '@element-plus/icons-vue'
import { toRefs, ref } from 'vue'
export default {
    name: "ProcessNodeRender",
    components: {
        Plus
    },
    props:{
        desc:{
            type: String,
            required: '',
        },
        task:{
            type: Object,
            required: true,
            default: () => {
                return {}
            }
        },
        error:{
            type: Boolean,
            default: false
        }
    },
    setup(props, context) {
        const { task } = toRefs(props)
        const tip = ref()
        const delUser = (i) => {
            task.value.users.splice(i, 1)
            context.emit('delUser', task.value.id, i)
        }
        const errorShark = () => {
            tip.value.classList.add('shake-tip')
            setTimeout(() => tip.value.classList.remove('shake-tip'), 1200)
        }
        return {
            delUser,
            tip,
            errorShark
        }
    }
}
</script>

<style lang="scss" scoped>
 .process-node-error{
  color: var(--el-color-danfer);
}

.add-user {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  :deep(.el-icon) {
    padding: 10px;
    font-size: 40px;
    border-radius: 50%;
    border: 1px dashed #8c8c8c;
    cursor: pointer;

    &:hover {
      color: var(--el-color-primary);
      border: 1px dashed var(--el-color-primary);
    }
  }
}

.shake-tip {
  animation: shake 1s ease-in-out;
}
//水平抖动提示
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(+2px, 0, 0); }
  30%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(+4px, 0, 0); }
  50% { transform: translate3d(-4px, 0, 0); }
}
</style>